import React from "react";
import Title from "../components/Title";
import SDTable from "../dataManage/SDTable";
import api from "../../api";
import moment from "moment";
import { ProFormRadio } from "@ant-design/pro-components";

import { companyMap, companyMap2 } from "../components/common";

import { Button, Form, Modal, Input, Col, Row, Select, InputNumber, message } from "antd";
import useReducer from "src/hooks/useReducer";
//import './index.scss'
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const RADIO_OPTION = [
  {
    label: "启用",
    value: "on",
  },
  {
    label: "禁用",
    value: "off",
  },
];
export default function YhglManage() {
  const formRef = React.useRef();
  const actionRef = React.useRef();
  const [form] = Form.useForm();

  const [sate, dispatch] = useReducer({
    visible: false, // 抽屉弹窗
    editId: "", // 编辑id
    title: "", // 抽屉标题
  });
  const { visible, editId, title } = sate;

  const columns = [
    {
      title: "用户名",
      dataIndex: "username",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: "密码",
      dataIndex: "password",
      width: 150,
      ellipsis: true,
      hideInSearch: true,

    },
    {
      title: "用户姓名",
      dataIndex: "name",
      width: 150,
      ellipsis: true,
    },
   
  
    {
      title: "用户邮箱",
      dataIndex: "email",
      width: 150,
      ellipsis: true,
    },
    {
      title: "用户电话",
      dataIndex: "phone",
      width: 150,
      ellipsis: true,
      hideInSearch: true,

    },
    {
      title: "所属公司",
      dataIndex: "companyId",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
      render: (text, record) => {
        return companyMap[record.companyId];
      }

    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
      hideInSearch: true,

      width: 150,
      fixed: "right",
      render: (text, record) => (
        <div style={{fontWeight: "bold"}}>
          <a onClick={() => handleEdit(record)}>编辑</a>
          
        </div>
      ),
    },
   
  ];
      // 新增
      const handleAdd = () => {
        form.resetFields();
        dispatch({
          visible: true,
          editId: "",
          title: "新增",
        });
      };
    
      // 编辑
      const handleEdit = (record) => {
        form.setFieldsValue({
          ...record,
          companyId: companyMap[record.companyId],
        });
        dispatch({
          visible: true,
          editId: record.userId,
          title: "编辑",
        });
      };
  
        //保存
  const save = () => {
    form.validateFields().then((values) => {
        const params = {
          ...values,
          
        }
        editId && (params.userId = editId);
     
        // 如果是新增， 那么userCreate 就是设置当前时间 
        
          params.companyId = companyMap2[params.companyId] || 0;
        

        const remote = editId ? api.editUser : api.addUser;

        remote(params).then((res) => {
          if (res.success) {
            dispatch({ visible: false });
            actionRef.current.reload();
            message.success("操作成功");
          }else {
            message.error(res.message || "操作失败");
          }
        }
      );
    });
  }
  return (
    <div className="css">
      <div style={{ padding: "0 100px" }}>
        <Title title={"用户管理"}></Title>
        <SDTable
          formRef={formRef}
          actionRef={actionRef}
           requestApi={api.yhgl}
          columns={columns}
         params={{userId:localStorage.getItem("userId")}}
          options={false}
          toolBarRender={() => [
            <Button type="primary" key="1" onClick={handleAdd}>
              新增
            </Button>,
          ]}
        ></SDTable>
           <Modal
        visible={visible}
        title={`${title}车辆信息`}
        width={900}
        onCancel={() => dispatch({ visible: false })}
        footer={[
          <Button key="back" onClick={() => dispatch({ visible: false })}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={save}>
            确定
          </Button>,
        ]}
      >
        <Form form={form}>
          <Form form={form} {...layout}>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="username"
                  label="用户名"
                  rules={[
                    {
                      required: true,
                      message: "用户名不能为空",
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="password"
                  label="密码"
                 
                >
                  <Input  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="name"
                  label="用户姓名"
                  
                >
                  <Input  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="email"
                  label="用户邮箱"
                
                >
                  <Input allowClear />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
            <Col span={12}>
                <Form.Item
                  name="phone"
                  label="用户电话"
                  
                >
                  <Input allowClear />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="companyId"
                  label="所属公司"
                  
                >
                  <Input allowClear />
                </Form.Item>
              </Col>
              </Row>
              <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="isactive"
                label="用户状态"
                rules={[
                  {
                    required: true,
                    message: "请选择用户状态",
                  },
                ]}
              >
                <ProFormRadio.Group options={RADIO_OPTION} />
              </Form.Item>
            </Col>
          </Row>
          </Form>
        </Form>
      </Modal>
      </div>
    </div>
  );
}
